<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信息科管理系统</title>
    <!-- 引入 Element UI -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入图标库 -->
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_8d5l8fzk5b87iudi.css">
    <!-- 引入自定义样式 -->
    <link rel="stylesheet" href="styles.css">
    <!-- 引入 echarts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
    <div class="layout">
        <!-- 左侧导航栏 -->
        <div class="sidebar">
            <div class="logo">信息科管理系统</div>
            <ul class="nav-menu">
                <li class="nav-item">
                    <div class="nav-item-content">
                        <div class="nav-item-left">
                            <i class="el-icon-menu"></i>
                            <span>工作台</span>
                        </div>
                    </div>
                </li>
                <li class="nav-item">
                    <div class="nav-item-content">
                        <div class="nav-item-left">
                            <i class="el-icon-document"></i>
                            <span>工单管理</span>
                        </div>
                        <i class="el-icon-arrow-right arrow"></i>
                    </div>
                    <ul class="sub-menu">
                        <li class="sub-menu-item" data-page="work-create">创建工单</li>
                        <li class="sub-menu-item" data-page="work-process">工单处理</li>
                        <li class="sub-menu-item" data-page="work-query">工单查询</li>
                        <li class="sub-menu-item" data-page="work-statistics">工单统计</li>
                    </ul>
                </li>
                <li class="nav-item">
                    <div class="nav-item-content">
                        <div class="nav-item-left">
                            <i class="el-icon-monitor"></i>
                            <span>设备管理</span>
                        </div>
                        <i class="el-icon-arrow-right arrow"></i>
                    </div>
                    <ul class="sub-menu">
                        <li class="sub-menu-item" data-page="equipment-list">设备列表</li>
                        <li class="sub-menu-item" data-page="equipment-maintenance">设备维护</li>
                        <li class="sub-menu-item" data-page="equipment-repair">维修记录</li>
                    </ul>
                </li>
                <li class="nav-item">
                    <div class="nav-item-content">
                        <div class="nav-item-left">
                            <i class="el-icon-warning"></i>
                            <span>巡检管理</span>
                        </div>
                        <i class="el-icon-arrow-right arrow"></i>
                    </div>
                    <ul class="sub-menu">
                        <li class="sub-menu-item" data-page="inspection-plan">巡检计划</li>
                        <li class="sub-menu-item" data-page="inspection-task">巡检任务</li>
                        <li class="sub-menu-item" data-page="inspection-record">巡检记录</li>
                    </ul>
                </li>
                <li class="nav-item">
                    <div class="nav-item-content">
                        <div class="nav-item-left">
                            <i class="el-icon-user"></i>
                            <span>人员管理</span>
                        </div>
                        <i class="el-icon-arrow-right arrow"></i>
                    </div>
                    <ul class="sub-menu">
                        <li class="sub-menu-item" data-page="staff-list">人员列表</li>
                        <li class="sub-menu-item" data-page="account-apply">账号申请</li>
                        <li class="sub-menu-item" data-page="permission-manage">权限管理</li>
                    </ul>
                </li>
                <li class="nav-item">
                    <div class="nav-item-content">
                        <div class="nav-item-left">
                            <i class="el-icon-data-analysis"></i>
                            <span>统计分析</span>
                        </div>
                        <i class="el-icon-arrow-right arrow"></i>
                    </div>
                    <ul class="sub-menu">
                        <li class="sub-menu-item" data-page="work-analysis">工单分析</li>
                        <li class="sub-menu-item" data-page="equipment-analysis">设备分析</li>
                        <li class="sub-menu-item" data-page="performance-analysis">绩效分析</li>
                    </ul>
                </li>
                <li class="nav-item">
                    <div class="nav-item-content">
                        <div class="nav-item-left">
                            <i class="el-icon-folder"></i>
                            <span>资料管理</span>
                        </div>
                        <i class="el-icon-arrow-right arrow"></i>
                    </div>
                    <ul class="sub-menu">
                        <li class="sub-menu-item" data-page="equipment-docs">设备文档</li>
                        <li class="sub-menu-item" data-page="operation-manual">操作手册</li>
                        <li class="sub-menu-item" data-page="maintenance-guide">维护指南</li>
                    </ul>
                </li>
                <li class="nav-item">
                    <div class="nav-item-content">
                        <div class="nav-item-left">
                            <i class="el-icon-setting"></i>
                            <span>系统设置</span>
                        </div>
                        <i class="el-icon-arrow-right arrow"></i>
                    </div>
                    <ul class="sub-menu">
                        <li class="sub-menu-item" data-page="basic-settings">基础设置</li>
                        <li class="sub-menu-item" data-page="notice-settings">通知设置</li>
                        <li class="sub-menu-item" data-page="system-log">系统日志</li>
                    </ul>
                </li>
            </ul>
        </div>

        <!-- 主要内容区域 -->
        <div class="main-container">
            <div id="content-container">
                <!-- 默认显示仪表板内容 -->
                <div id="dashboard" class="page-content active">
                    <!-- 顶部统计卡片 -->
                    <div class="stats-cards">
                        <div class="stat-card" style="background: #409EFF">
                            <h3>运维总量</h3>
                            <div class="number">395条</div>
                        </div>
                        <div class="stat-card" style="background: #67C23A">
                            <h3>设备总量</h3>
                            <div class="number">24个</div>
                        </div>
                        <div class="stat-card" style="background: #E6A23C">
                            <h3>巡检总量</h3>
                            <div class="number">34条</div>
                        </div>
                        <div class="stat-card" style="background: #909399">
                            <h3>合作厂商</h3>
                            <div class="number">3个</div>
                        </div>
                        <div class="stat-card" style="background: #00CEC9">
                            <h3>管理人员</h3>
                            <div class="number">3名</div>
                        </div>
                    </div>

                    <!-- 图表区域 -->
                    <div class="charts-container">
                        <div class="chart-box">
                            <div class="title">科室故障率</div>
                            <div id="departmentChart" style="height: 100%"></div>
                        </div>
                        <div class="chart-box">
                            <div class="title">运维类型</div>
                            <div id="maintenanceChart" style="height: 100%"></div>
                        </div>
                    </div>

                    <!-- 底部图表 -->
                    <div class="bottom-charts">
                        <div class="chart-box">
                            <div class="title">故障分析</div>
                            <div id="faultAnalysisChart" style="height: 100%"></div>
                        </div>
                        <div class="chart-box">
                            <div class="title">高质量发展</div>
                            <div id="developmentChart" style="height: 100%"></div>
                        </div>
                        <div class="chart-box">
                            <div class="title">专业技术分析</div>
                            <div id="technicalAnalysisChart" style="height: 100%"></div>
                        </div>
                    </div>
                </div>
                <!-- 其他页面内容将通过 JavaScript 动态加载 -->
            </div>
        </div>
    </div>

    <!-- 引入自定义脚本 -->
    <script src="pages.js"></script>
    <script src="main.js"></script>
</body>
</html>
